import { useAtom } from 'jotai';
import { counterAtom } from '@/store/atoms';
import { Button } from '@/components/ui/Button';

export const Home = () => {
  const [count, setCount] = useAtom(counterAtom);

  return (
    <div className="max-w-7xl mx-auto py-12 px-4 sm:px-6 lg:px-8">
      <div className="text-center">
        <h1 className="text-4xl font-bold text-gray-900">
          Welcome to React App
        </h1>
        <p className="mt-3 text-lg text-gray-500">
          Start building your application with React, Vite, and TypeScript.
        </p>
        
        <div className="mt-8">
          <p className="text-2xl font-semibold text-gray-700">
            Count: {count}
          </p>
          <div className="mt-4 space-x-4">
            <Button onClick={() => setCount(c => c + 1)}>
              Increment
            </Button>
            <Button variant="secondary" onClick={() => setCount(c => c - 1)}>
              Decrement
            </Button>
          </div>
        </div>
      </div>
    </div>
  );
};